<template>
    <el-carousel :interval="5000" arrow="always" height="460px">
        <el-carousel-item v-for="item in listData" :key="item">
            <a :href="item.href" class="link">
                <div class="date">
                    <span class="day">{{ item.date.substring(8, 10) }}</span>
                    <span class="month">{{ item.date.substring(5, 7) }}月</span>
                </div>
                <div class="box">
                    <img :src="item.src" class="image">
                    <div class="text">
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.content }}</p>
                    </div>
                </div>
            </a>
        </el-carousel-item>
    </el-carousel>
</template>

<script setup lang="ts">
const listData = [
    {
        href: "https://www.scvtc.edu.cn/info/1326/22859.htm",
        src: "https://boot-img.xuexi.cn/image/1004/process/1cf09048317f47f6adfff4173b3c7258.jpg",
        title: "习近平主持首届中国－中亚峰会并发表主旨讲话",
        content: "习近平主持首届中国－中亚峰会并发表主旨讲话强调携手建设守望相助、共同发展、普遍安全、世代友好的中国－中亚命运共同体新华社西安5月19日电 5月19日上午，国家主席习近平在陕西...",
        date: "2023-05-20"
    },
    {
        href: "https://www.scvtc.edu.cn/info/1047/22842.htm",
        src: "https://www.scvtc.edu.cn/__local/C/D1/A2/64174679A813927B2886668BF70_9B0788C1_FC44.jpg",
        title: "四川职业技术学院锂电科技学院启用入驻",
        content: "笃行致远新征程，砥砺奋进谱新篇。5月20日，四川职业技术学院锂电科技学院入驻仪式隆重举行。承载着全校师生的热切期待与社会各界的殷切厚望，锂电科技学院迎来落成启用的重要历史...",
        date: "2023-05-20"
    },
    {
        href: "https://www.scvtc.edu.cn/info/1047/22811.htm",
        src: "https://www.scvtc.edu.cn/__local/A/4E/E6/2BEDBFE751E56D0FECC4C978C92_96770AAD_629F4.png",
        title: "学校举行2023年上期应急疏散暨反恐防暴、灭火演练",
        content: "“防范灾害风险护航高质量发展”。为进一步加强校园安全工作，切实提高师生防灾减灾救灾意识，根据《四川省教育厅关于开展2023年防灾减灾救灾宣传月活动的通知》文件精神和要求...",
        date: "2023-05-18"
    },
    {
        href: "https://www.scvtc.edu.cn/info/1047/22780.htm",
        src: "https://www.scvtc.edu.cn/__local/F/78/27/A0AE2E3E92CD51DB538A1895FB3_843DB628_4BE27.jpg",
        title: "我校成功举办七届大学生田径运动会",
        content: "5月的校园，繁花似锦,花团锦簇,5月11日至12日，我校第七届大学生田径运动会在田径运动场隆重举行。本届运动会以“弘扬体育精神，培育时代新人”为主题，共有来自15个二级学院的698...",
        date: "2023-05-13"
    },
]
</script>

<style scoped lang="scss">
.el-carousel {
    margin-top: 20px;

    .link {
        display: flex;
        height: 460px;
        position: relative;
        padding-top: 20px;
       
        .date {
            position: absolute;
            color: #fff;
            display: flex;
            flex-direction: column;
            background-image: url("https://www.scvtc.edu.cn/images/s1-data-bj.png");
            background-size: 100%;
            width: 100px;
            height: 76px;
            right: 0px;
            top: 10px;
            align-items: center;
            z-index:999;

            .day {
                font-size: 30px;
            }

            .month {
                line-height: 20px;
            }
        }

        .box {
            height: 440px;
            padding-top: 20px;
            display: flex;
            background-color: #940708;
            
            .image {
                width: 590px;
                height: 420px;
            }

            .text {
                width: 260px;
                padding-left: 20px;
                


                h3 {
                    color: #fff;
                    padding: 70px 10px 30px 10px;
                    
                }

                p {
                    color: #ed9898;
                    font-size: 15px;
                    padding: 0px 10px;
                }
            }
        }


    }
}
</style>